<template>
    <div class="TODOBOX">
      <div class="TODO">
        <h2>校园公告</h2>
        <div class="content" v-for="item in announcementContent" :key="item">
          <div class="text">{{ item.title }}</div>
          <div class="itemList">
            <div class="text">{{ item.content }}</div>
            <div>{{ item.time }}</div>
          </div>
          <hr>
        </div>
      </div>
      <div class="TODO">
        <div class="Carousel">
          <a-carousel autoplay style="width: 400px;">
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
          </a-carousel>
        </div>
        <div></div>
      </div>
      <div class="TODO">
        <h2>信息通知</h2>
        <div class="content" v-for="item in announcementContent" :key="item">
          <div class="text">{{ item.title }}</div>
          <div class="itemList">
            <div class="text">{{ item.content }}</div>
            <div>{{ item.time }}</div>
          </div>
          <hr>
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const announcementContent = ref([
  {
    title: '我是标题12312312312312312312',
    time: '2021',
    content: '测试123456789123124124'
  },
  {
    title: '我是标题',
    time: '2022',
    content: '测试'
  },
  {
    title: '我是标题',
    time: '2023',
    content: '测试'
  },
])

</script>

<style scoped>
.TODOBOX {
  min-height: 600px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: nowrap;
}

.TODOBOX .TODO {
  flex: 1;
}

.TODO h2 {
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}

.content {
  padding: 0 35px;
  margin: 10px 0;
}

.itemList {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  margin-top: 10px;
}

.text {
  width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.Carousel .slick-slide) {
  text-align: center;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

:deep(.Carousel .slick-slide h3) {
  color: #fff;
}
</style>